<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

<title>SAR: Sistema de Atención de Requerimientos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="screen, projection"
	href="../static/styles/blueprint/screen.css" />

<link rel="stylesheet" type="text/css" media="print"
	href="../static/styles/blueprint/print.css" />

<link rel="stylesheet" type="text/css" media="screen"
	href="../static/styles/booking.css" />

<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"
	th:src="@{/resources/demos/style.css}" />

</head>

<body tiles:fragment="content">

		<h5>
			<span class="alt" th:text="#{programarSolicitudes.consultarProgramacion}">Solicitudes a Programar</span>
			> 
			<a href='/programarSolicitudes' th:href="@{'/programarSolicitud/' + ${solicitud.id}}"
			 th:text="#{programarSolicitudes.programacion}">Programación de Solicitud</a>
			>
			<span th:text="#{programarSolicitudes.programarOperador}">Programación de Operador</span>
		</h5>
		<hr />
	<h2>
		<p th:text="#{programarOperador.titulo}">Programar Operador</p>
	</h2>

	<div>
		<form action="#" th:object="${horario}" th:action="@{/programarOperador}" method="post" class="inline">	
			 <input type="hidden"  th:value="${operador.id}" name="idOperador" />
			 <input type="hidden"  th:value="${fase.id}" name="idFase" />
			<fieldset>
			
				<div class="error" th:if="${#fields.hasErrors('*')}">
                  <span th:each="err : ${#fields.errors('*')}">
                  <span th:text="${err}">Entrada incorrecta</span><br />
                  </span>
           	    </div>
						<div class="span-8">
							<label>Solicitud: </label>
							<label th:text="${solicitud.id}">50</label>
							<br/>
							<label th:text="#{programarSolicitudes.horasFase}">Total de horas estimadas </label>
							<label th:text="${fase.esfuerzoEstimado}">30</label>
							<br/>
							<label th:text="#{programarSolicitudes.cantidadRecursos}">Recursos solicitados: </label>
							<label th:text="${fase.recursosEstimados}">2</label>
							<br/>
							<label>Operador: </label>
							<label th:text="${operador.nombre}">Juan Quispe</label>
							<br/>							
						</div>
						<div class=" success span-8 last">
							<label th:text="#{programarSolicitudes.competenciaFase}" >Competencias Relacionadas</label>
						 <ul>
						    <li th:each="competencia : ${fase.competencias}" th:text= "${competencia.nombre}" >Fase X</li>				      
						 </ul>						 
						</div>
			</fieldset>
			<h3>
				<p th:text="#{programarOperador.programacion}">Programación</p>
			</h3>			
			<fieldset>
			<div class="span-8">
				<label th:text="#{programarOperador.fechaInicio}" for="fechaDP">Fecha inicio:</label>
				<input type="text" id="fechaDP" name="fechaDP" th:field="*{fechaInicio}"/>
				<br/>			
				<label th:text="#{programarOperador.horaInicio}" for="horaSelect">Hora inicio:</label>
				<select th:field="*{horaInicio}"  id="horaSelect">
						<option value="0">12:00 am</option>
						<option value="1">1:00 am</option>
						<option value="2">2:00 am</option>
						<option value="3">3:00 am</option>
						<option value="4">4:00 am</option>
						<option value="5">5:00 am</option>
						<option value="6">6:00 am</option>
						<option value="7">7:00 am</option>
						<option value="8">8:00 am</option>
						<option value="9">9:00 am</option>
						<option value="10">10:00 am</option>
						<option value="11">11:00 am</option>
						<option value="12">12:00 pm</option>
						<option value="13">1:00 pm</option>
						<option value="14">2:00 pm</option>
						<option value="15">3:00 pm</option>
						<option value="16">4:00 pm</option>
						<option value="17">5:00 pm</option>
						<option value="18">6:00 pm</option>
						<option value="19">7:00 pm</option>
						<option value="20">8:00 pm</option>
						<option value="21">9:00 pm</option>
						<option value="22">10:00 pm</option>
						<option value="23">11:00 pm</option>
				</select>
			</div>
			<div class="span-8 last">			
				<script th:inline="javascript">
				//<![CDATA[
				  $(function() {
					  $( "#spinner" ).spinner({ min: 1 });
// 				    $( "#spinner").spinner({					
// 				      spin: function( event, ui ) {				
// 				        if ( ui.value > [[${fase.esfuerzoEstimado}]]
// 				        		) {									
// 				          $( this ).spinner( "value", [[${fase.esfuerzoEstimado}]]
// 				        		  );									
// 				          return false;									
// 				        } else if ( ui.value < 1 ) {									
// 				          $( this ).spinner( "value", 1 );									
// 				          return false;									
// 				        }									
// 				      }									
// 				    });
				    $( "#spinner" ).spinner( "value", 1 );
				  });	
				//]]>
				
				
			    </script>	
			    <label th:text="#{programarOperador.horasAsignadas}" th:for="'sf' + ${fase.id} + ${operador.id}" >Horas asignadas:</label>					                
              <input id="spinner" th:field="*{horasTotal}" name="value" th:value="${fase.esfuerzoEstimado}" readonly="readonly"/>              	     
			</div>
			<br/>
			<div class = "span-8 last">
			<button type="button" th:text="#{programarOperador.previsualizar}" onclick="renderPrev()">Previsualizar</button>			
			<button type="submit">Programar Operador</button>				
			<a href="#" th:href="@{'/programarSolicitud/' + ${solicitud.id}}">Volver</a>
			</div>

			<div class="span-17">						
			<hr/>
			<h3>
				<p th:text="#{programarOperador.calendario}">Calendario de Recurso</p>
			</h3>
				<script th:inline="javascript">
				
				var cal;
				var date = new Date();
		        var d = date.getDate();
		        var m = date.getMonth();
		        var y = date.getFullYear();
				
					$(document).ready(function() {
		           
		            cal = $('#calendar').fullCalendar({
		                header: {
		                    left: 'prev,next today',
		                    center: 'title',
		                    right: 'month,agendaWeek,agendaDay'
		                },
		                editable: false,
		                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
		                             'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
		                dayNames:   ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
		                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
		                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
		                defaultView: 'month',
		                allDaySlot: false,
		                firstHour: 8,
		                eventSources: [
		                	/*[[@{'/getFechas/'+ ${operador.id}}]]*/
		                	,
		                	/*[[@{'/getRestringidos'}]]*/
		                	,
		                	/*[[@{'/getIgnorados/'+ ${operador.id} + '/' + ${solicitud.id}}]]*/
		                ]
		            });
		         });
		          
// 						$(document).ready(function() {
						           
// 						          $.getJSON(/*[[@{'/getFechas/'+ ${operador.id}}]]*/ /getFechas , function (data) {
// 						            cal = $('#calendar').fullCalendar({
// 						                header: {
// 						                    left: 'prev,next today',
// 						                    center: 'title',
// 						                    right: 'month,agendaWeek,agendaDay'
// 						                },
// 						                editable: false,
// 						                monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
// 						                             'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
// 						                dayNames:   ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
// 						                monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
// 						                dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
// 						                defaultView: 'agendaWeek',
// 						                allDaySlot: false,
// 						                firstHour: 8,
// 						                eventSources: [data]
// 						            });
// 						         });
						          
// 						        });
						
						function renderEvent() {
			                cal.fullCalendar('renderEvent', {
			                		id:'previsualiza',
			                        start: new Date(y, m, 17),
			                        title: 'heyman'
			                });
			        	}
						
						function renderPrev() {
							h = document.getElementById("horaSelect");
							prevHora = h.options[h.selectedIndex].value;
							prevFecha = $("#fechaDP").datepicker("getDate");
							prevTH = document.getElementById("spinner").value;
							var curr_date = prevFecha.getDate();
						    var curr_month = prevFecha.getMonth() + 1; //Months are zero based
						    var curr_year = prevFecha.getFullYear();
							jsonFeed = t1.concat(curr_date,t3,curr_month,t3,curr_year,t2,prevHora,t2,prevTH,t2,operador);
							cal.fullCalendar('removeEvents', 'previsualiza');
							cal.fullCalendar('addEventSource', jsonFeed);
			        	}
						
						var t1 = "/sar/getPrevi/";
						var t2 = "/";
						var t3 = "-";
						var h = document.getElementById("horaSelect");
						var prevHora = h.options[h.selectedIndex].value;
						var prevFecha = $("#fechaDP").datepicker("getDate");
						var prevTH = document.getElementById("spinner").value;
						var jsonFeed = t1.concat(prevFecha,t2,prevHora,t2,prevTH,t2,operador);
						var operador = /*[[${operador.id}]]*/ operadorId;

						</script>
				<div id='calendar'></div>
			</div>
			</fieldset>			
		</form>
	</div>
</body>

</html>
